var vue;
var count;
$(function () {

    vue = new Vue({
        el: "#test",
        data: {
            message: [],
            title: [],
            item: [],
            index: ''
        },
        methods: {
            VueQuestionItem: function (actionName, page) {
                var _this = this;
                this.$http.get("naired"//{param:{cuurPage:page}}
                    , {emulateJSON: true}).then(function (res) {
                    _this.message = res.body;

                })
            }
            ,layuiInit(){
                var _self=this;
                layui.use('table',function () {

                })
            }
        },
        watch:{
            'basicTableData':{
                handler:function (newVal,oldVal) {
                    console.log(this.basicTableData)
                    this.layuiInit();
                },
                deep:true
            }
        }
    });
    //删除信息
    $("#filesTable").on("click", ".delet", function () {
        var id = $(this).attr("id");
       DeletQuestion(id);
       vue.VueQuestionItem();
    })
    /**
     * 新增试卷信息
     */
    $("#QuestionNairelAdd").click(function () {
        Bntcount++;
        layui.use('layer', function () {
            layer.open({
                type: 2//此处以頁面举例
                , title: "新增调查问卷题目"
                , anim: Math.floor(Math.random() * 7)
                , area: ['500px', '400px']
                , shade: 0
                , scrollbar: true
                , id: 'layerDemo'
                , maxmin: true
                , offset: '0px'
                , content: ['questionNaireAdd',]
                , btn: ['新增', '关闭'] //只是为了演示
                , yes: function () {
                    var parent = $(this).parent;
                    var clid = $(this).children;
                    // var input =$("#layui-layer-iframe1").contents().find("#app").find("input");
                    var data = $("#layui-layer-iframe"+Bntcount).contents().find("#app").serialize();
                    // for (var i =0;i<input.length;i++){
                    //
                    // }
                    console.log(JSON.stringify(data));
                    requestUtilParams.xhr("insertQuest", data, "psot").done(function (res) {
                        if (res.mesCode != 0&&res.mesCode!=null) {
                            alert("你新增了" + res.mesCode + "新增");
                            $("#layui-layer-iframe"+Bntcount).contents().find("#app").reset();
                            $("#layui-layer-iframe"+Bntcount).contents().find(".layui-layer-btn1").click();
                            layer.close();
                            vue.VueQuestionItem();

                        } else {
                            alert("新增失败");
                        }
                    });
                }
                , btn2: function () {
                    layer.close();
                }
                , zIndex: layer.zIndex //重点1
                , success: function (layero) {
                    layer.setTop(layero); //重点2
                }
            });
        })
    })
    /**
     * 显示新增选项按钮
     */
    $("#app").on("change", ".select", function () {
        var select = $("#app").find("select").val();
        if (select == 1 || select == 3) {
            $("#additem").show();
        } else if (select == 2) {
            $("#additem").hide();
            $
            ("#app .chooseItem").empty();
        }
    })
    /**
     * 显示新增选项
     */
    var count = 0;
    $("#additem").click(function () {
        var Letter = 0;
        var a = $("input[data-id=questionnaireImte]").val();
        if ($("#app").find("input[data-id=questionnaireImte]").val() != null && a != "") {
            count++;
            var Item = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];
            var $ul = $("#app .chooseItem");
            $ul.show();
            if (count <= 9) {
                for (var i = 0; i < count; i++) {
                    var $li = $("  <li class=\"\">\n" +
                        "                    <label class=\"\">\n" +
                        "                        <input type=\"text\" name=\"questionnaoreOption+[" + i + "].optionsLetter\" style=\"width: 10px;border: none\" value=" + Item[i] + ">\n" +
                        "                        <input type=\"text\" name=\"questionnaoreOption[" + i + "].optionsContent\" class=\"layui-input\">\n" +
                        "                    </label>\n");
                }
            } else {
                alert("选项过多,请联系管理员");
            }
            $ul.append($li);
        } else {
            alert("请先新增题目");
        }
    })
    /**
     * 查询试卷信息
     */
    vue.VueQuestionItem();

    //添加题目
    $("#test").on("click", ".selectInfo", function () {
        var name = $(this).attr("name");
        var id = $(this).attr("data-ty");
        layui.use('layer', function () {
            //示范一个公告层
            layer.open({
                type: 1
                , title: '新增题目' //不显示标题栏vc
                , closeBtn: false
                , area: '100%'
                , shade: 0.8
                , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                , btn: ['新增题目', '关闭']
                , btnAlign: 'c'
                , moveType: 1 //拖拽模式，0或者1
                , content: '\n' +
                    '    <form id="addTitle">\n' +
                    '            <div class="questionName"  >\n' +
                    '<input type="hidden" name="questionNairedId" value=' + id + '>        ' +
                    '    试卷题目:' + name + ' \n' +
                    '            </div>\n' +
                    '            <ul id="title">\n' +
                    '                  <li>\n' +
                    '                       <input name="questionnairefiles[0].questionnaireImte" type="text" class="layui-input" style="width: 300px;height: 30px;margin: 20px;" />\n' +
                    '                   </li>\n ' +
                    '       <li><select  name="questionnairefiles[0].questionnaireState" class="select" >\n' +
                    '            <option  value="1">多选</option>\n' +
                    '            <option  value="2">回答</option>\n' +
                    '            <option  value="3" selected>单选</option></select>' +
                    '           </li> </ul>\n' +
                    '            </form>\n' +
                    '     '
                , yes: function () {
                    var title = $("#title").find("input[name=title]").val();
                    var data = $("#addTitle").serialize();
                    requestUtilParams.xhr("insertTitle", data, "post").done(function (res) {
                        if (res.mesCode >= 1) {
                            alert("新增了" + res.mesCode + "信息");
                            $("#addTitle").serialize().reset();
                            layer.close();
                        }
                    })
                }, btn1: function () {
                    $("#title").find("li").after($("<li><input type=\"text\" class=\"layui-input\" style=\"width: 100px;height: 30px;margin: 20px;\" /></li>"));
                }, success: function (layero) {

                }
            });
        });
    })

    /**
     * 显示新增题目框
     */
    var num = 0;
    $("#addOption").click(function () {

        var $tit = $("#title");
        if ($tit.is(':hidden')) {
            $tit.show();
            $(this).next().show();
            $(this).next().next().show();
        } else {
            num++;
            var $options = $("<div class=\"questionSubject\" value=\"42111\">\n" +
                "         <span>题目</span> <input class=\"layui-input\" type=\"text\" name=\"questionnairefiles[" + num + "].questionnaireImte\">\n" +
                "   <select  name=\"questionnairefiles[" + num + "].questionnaireState\" class=\"select\" >\n" +
                "            <option  value=\"1\">多选</option>\n" +
                "            <option  value=\"2\">回答</option>\n" +
                "            <option  value=\"3\" selected>单选</option>\n" +
                "    </select>          " +
                "        </div>");
            $tit.append($options);
        }
    })
    //新增题目
    //显示试卷相对应的题目
    //按键标识
    EidtItem();
    Eidtfiles();
    //关闭
    colse();
    //编辑选项
    Itemedit();
    //关闭编辑选项
    colseedit();
    //确认编辑
    okedit();
    //新增选项
    ItemAdd();
    //删除选项
    deletOption();
  //删除题目
    deletTitleItem();
})

/**
 * 新增选项
 */
var a=0;
var Bntcount =0;
function ItemAdd() {
    $("#questionTable").on("click", ".ItemAdd", function () {
        Bntcount++;
        a++;
        var id = $(this).attr("name");
        var name=$(this).parent().prev().prev().text();
        var type = $(this).parent().prev().text();
        layui.use('layer', function () {
            layer.open({
                type: 2
                , title: '新增选项' //不显示标题栏vc
                , closeBtn: false
                , area: ['400px', '300px']
                , shade: 0.8
                , id: 'layer2' //设定一个id，防止重复弹出
                , btn: ['新增选项', '关闭']
                , btnAlign: 'c'
                , moveType: 1 //拖拽模式，0或者1
                , content: "questionItem"
                , yes: function () {
                    var data = $("#layui-layer-iframe"+Bntcount).contents().find("#addOptionItem").serialize();
                    console.log(data);
                    if (data!=null){
                    requestUtilParams.xhr("insertOption", data).done(function (res) {
                        if (res.mesCode >= 1) {
                            alert("新增了" + res.mesCode + "信息");
                            $("#layui-layer-iframe"+Bntcount).contents().find("#addOptionItem").reset();
                        }
                    })
                    }else {
                        alert("请输入选项");
                    }
                }, btn1: function () {
                    $("#title").find("li").after($("<li><input type=\"text\" class=\"layui-input\" style=\"width: 100px;height: 30px;margin: 20px;\" /></li>"));
                }, success: function (layero,index) {
            if (a==1){
                    var body = layui.layer.getChildFrame('body', index);
                    console.log(body)
                    body.find("#app");
                    var table = body.find("#addOptionItem");
                    console.log(table);
                    body.find("#questionId").val(id);
                    body.find(".titleNames").text(name);
                    body.find(".titleTypes").text(type);
                    layer.setTop(layero);
                }
                }
            });
        });
    })
}


/**
 * 查看详细题目
 * @constructor
 */
function Eidtfiles() {
    $("#filesTable").on("click", ".Eidt", function () {
        var _this = this;
        //获取题目类别
        var questionNaireName = $(this).attr("name");
        $.ajax({
            url: "nairedById"
            , data: {questionNairedid: questionNaireName}
            , dataType: "json"
            , success: function (res) {
                if (res != null && res != "") {
                    var type = ["多选", "回答", "单选"];
                    var $question = $("#questionTable");
                    console.log(res.length);
                    $(_this).hide();
                    $(_this).next().next().show();
                    $(_this).parent().parent().siblings().hide();

                    for (var i = 0; i < res.length; i++) {
                        if (res[i].questionnairefiles[0].questionnaireState!=2){
                        var $questionBady = $(
                            "        <tr id=" + res[i].questionnairefiles[0].questionnaireImte + ">\n" +
                            "            <td>题目" + (i + 1) + "</td>\n" +
                            "            <td>" + res[i].questionnairefiles[0].questionnaireImte + "</td>\n" +
                            "            <td>" + type[(res[i].questionnairefiles[0].questionnaireState - 1)] + "</td>\n" +
                            "            <td>\n" +
                            "                <button id=" + res[i].questionnairefiles[0].questionnaireFileId + " name=" + res[i].questionnairefiles[0].questionnaireState + "  class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm questionEidt\">查看选项</button>\n" +
                            "                <button name=" + res[i].questionnairefiles[0].questionnaireFileId + " class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm ItemAdd\">新增选项</button>\n" +
                            "                <button id=" + res[i].questionnairefiles[0].questionnaireFileId + " class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm deletTitle\">删除</button>\n" +
                            "                <button name=" + (res[i].questionnairefiles[0].questionnaireFileId) + " style=\"display: none\"  class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm colse\">关闭</button>\n" +
                            "                \n" +
                            "            </td>\n" +
                            "            </tr>\n");
                        $question.append($questionBady);
                    }else{
                        var $questionBady = $(
                            "        <tr id=" + res[i].questionnairefiles[0].questionnaireImte + ">\n" +
                            "            <td>题目" + (i + 1) + "</td>\n" +
                            "            <td>" + res[i].questionnairefiles[0].questionnaireImte + "</td>\n" +
                            "            <td>" + type[(res[i].questionnairefiles[0].questionnaireState - 1)] + "</td>\n" +
                            "            <td>\n" +
                            "                <button id=" + res[i].questionnairefiles[0].questionnaireFileId + " class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm deletTitle\">删除</button>\n" +
                            "                \n" +
                            "            </td>\n" +
                            "            </tr>\n");
                        $question.append($questionBady);
                         }
                    }
                } else {
                    alert("该试卷还未添加题目，请先添加题目");

                }
            }
        })
    })
}

/**
 * 查看题目选项
 * @constructor
 */
function EidtItem() {
    $("#questionTable").on("click", ".questionEidt", function () {
        var _this = this;
        var questionNaireName = $(this).attr("id");
        console.log(questionNaireName);
        //获取题目类别
        var type = $(this).attr("name");
        $.ajax({
            url: "options"
            , data: {QuestionnaireFileId: questionNaireName}
            , dataType: "json"
            , success: function (res) {
                if (res != null && res != []) {
                    var $question = $(_this).parent().parent();
                    var list = res.length;
                    res = res.reverse();
                    if (res.length != 0 && type != 2) {
                        $(_this).hide();
                        $(_this).nextAll().show();
                        for (var i = 0; i < res.length; i++) {
                            var $questionBady = $(
                                "   <tr class=" + res[i].questionnaireFileId + ">\n" +
                                "            <td>选项：" + res[i].optionsLetter + "</td>\n" +
                                "            <td>" + res[i].optionsContent + "</td>\n" +
                                "            <td>\n" +
                                "                <button name=" + res[i].optionsId + " class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm deletItem\">删除</button>\n" +
                                "                <button  class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm edit\">编辑</button>\n" +
                                "                <button :name=" + res[i].optionsId + " style=\"display: none\" class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm colseedit\">取消编辑</button>\n" +
                                "                <button :name=" + res[i].optionsId + " style=\"display: none\" class=\"layui-btn layui-btn-sm layui-btn-radius layui-btn-warm okedit\">确认编辑</button>\n" +
                                "            </td>\n" +
                                "            </tr>\n");
                            $question.after($questionBady);
                        }
                    } else {
                        alert("该题为回答题没有选项");
                    }
                } else {
                    alert("该选项没有题目");
                }
            }
        })
    })
}

/**
 * 关闭显示题目
 */
function colse() {
    $("#test").on("click", ".colse", function () {
        var name = $(this).attr("name");
        if (name == 0) {
            $(this).parent().parent().parent().parent().nextAll().empty();
            $(this).hide();
            $(this).prevAll().show();
            $(this).parent().parent().siblings().show();
        } else {
            $(this).parent().parent().parent().parent().nextAll().empty();
            $(this).parent().parent().siblings().show();
            $("#questionTable").find("." + name).remove();
            $(this).hide();
            $(this).prevAll().show();

        }
    })
}

/**
 * 编辑选项
 */
function Itemedit() {
    $("#questionTable").on("click", ".edit", function () {
        $(this).hide();
        $(this).prev().hide();
        $(this).nextAll().show();
    })
}

/**
 * 关闭编辑选项
 */
function colseedit() {
    $("#questionTable").on("click", ".colseedit", function () {
        $(this).hide();
        $(this).prevAll().show();
        $(this).next().hide();
    })
}

/*
*上传编辑数据
 */
function okedit() {
    $("#questionTable").on("click", ".okedit", function () {
        var _this = this;
        var data = {
            optionsId: $(this).attr("name"),
            optionsContent: $(this).parent().prev().text(),
            optionsLetter: $(this).parent().prev().prev().text()
        };
        requestUtilParams.xhr("updataOptions", data, "post").done(function (res) {
            if (res == null && res == "") {
                alert("修改失败");
            } else {
                alert("修改了题目：" + $(_this).parent().parent().prev().attr("id") + "一个选项")
            }
        })
    })
}

/**
 * 删除题目
 */
function deletTitleItem() {
    $("#questionTable").on("click",".deletTitle",function () {
        //获取当前id
        var data={ids:$(this).attr("id")} ;
        requestUtilParams.xhr("deletTitle",data).done(function (res) {
                if (res.mesCode>0){
                    alert("删除成功");
                    vue.VueQuestionItem();
                }else {
                    alert("删除失败");
                }
        })
    })
}

/**
 * 删除选项
 */
function deletOption() {
    $("#questionTable").on("click",".deletItem",function () {
      var data ={"ids": $(this).attr("name")};
        requestUtilParams.xhr("deletOption",data).done(function (res) {
            console.log(res);
            if (res!=null){
                alert("删除了"+res.mesCode+"个选项");

            }else {
                alert("失败");
            }
        })
    })
}
//删除题目
function DeletQuestion(id) {
    var data={"QuestionNairedId": id};
    requestUtilParams.xhr("deletQuestion",data).done(function (res) {

        if (res.mesCode == 0) {
            alert("删除失败了，找一下大佬吧！！")
        } else {
            alert("你删除了" + res.mesCode + "条信息");
            vue.VueQuestionItem();
        }

    })
}
